<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中样式-style</title>
    <script src="../lib/vue.js"></script>

</head>
<body>
   <!-- 属性绑定的方式-->
    <div id="app">
   <!-- 1.内联样式-->
        <h2 :style="{color:'blue','font-weight':600}">雨后有车驶来，驶过暮色苍白</h2>

        <!--2.使用对象-->
        <h2 :style="styleObj">雨后有车驶来，驶过暮色苍白</h2>

        <!--3.使用多个对象-->
        <h2 :style="[styleObj,styleObj2]">雨后有车驶来，驶过暮色苍白</h2>
    </div>
<script>
    var vue = new Vue({
        el : '#app',
        data :{
            flag : true,
            styleObj : {
                color:'blue',
                'font-weight':400
            },
            styleObj2 : {
                'font-style': 'italic'
            }
        }
    })
</script>
</body>
</html>